<template>
  <div
    class="flex flex-col justify-center items-center bg-[var(--jjext-color-brand-light)] min-h-100vh"
  >
    <div class="h-400px flex rounded-md overflow-hidden">
      <div class="h-full hidden md:inline-block">
        <el-image :src="loginBg" class="h-full w-400px"></el-image>
      </div>
      <div class="bg-#fff md:w-400px w-350px h-full px-40px py-40px">
        <div class="text-center text-3xl font-medium mb-8">管理后台</div>
        <el-form ref="formRef" :model="form" :rules="formRules" size="large">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入账号">
              <template #prepend>
                <icon-ep-user size="16" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入账号">
              <template #prepend>
                <icon-ep-lock size="16" />
              </template>
            </el-input>
          </el-form-item>
          <el-button class="w-full" type="primary" size="large" @click="onLogin">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formRules } from './helpers/rule';
import { useUserStore } from '@/store';
defineOptions({ name: 'Login' });
const loginBg = new URL('@/assets/image/login-bg.png', import.meta.url).href;

const userStore = useUserStore();
const form = reactive({ username: '', password: '' });
const formRef = useTemplateRef('formRef');
const loading = ref(false);
const onLogin = async () => {
  await formRef.value.validate();

  try {
    loading.value = true;
    await userStore.login(form);
  } finally {
    loading.value = false;
  }
};
</script>
